<template>
  <div>
    <canvas :width="width" :height="height" id="canvas" :nodes="nodes"></canvas>
  </div>
</template>

<script>

export default {
  name: "jtopo",
  props:{
    height: {
      type: Number,
      default: 500
    },
    width: {
      type: Number,
      default: 500
    },
    id: {
      type: String,
      default: ''
    },
    backImg: {
      type: String,
      default: ''
    },
    nodes: {
      type: Object
    }
  },
  data() {
    return{
      stage: {},
      scene: {}
    }
  },
  mounted() {
    this.initTopo()
  },
  methods: {
   initTopo() {
      if(!this.nodes){
        this.$message.error("请输入初始化数据")
      }
      let canvas = document.getElementById("canvas");
      // 加载空白的编辑器
      if (this.nodes === '-1') {
        this.stage = new JTopo.Stage(canvas)         // 定义舞台对象
        this.scene = new JTopo.Scene(this.stage)    // 定义场景对象
      } else {
        this.stage = JTopo.createStageFromJson(this.nodes, canvas)    // 根据保存好的jsonStr(拓扑结构)创建舞台对象
        this.scene = this.stage.childs[0]                           // 场景对象列表,childs是舞台的属性
      }
      

      // stage.eagleEye.visible = true;
      stage.wheelZoom = 1.2; //缩放比例
      let scene = new JTopo.Scene(stage);
      scene.background = '/static/bg.jpg';
    }
  }
};
</script>
